<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    button{
        outline: none;
        border: 0;
        width: 200px;
        height: 30px;
        background: linear-gradient(90deg,#1584fb,#39eaa9);
        border-radius: 5px;
    }
    .marsk{
        position: fixed;
        background-color: rgba(0,0,0,.5);
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .box{
        border-radius: 10px;
        background-color: #fff;
        width: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    .title,.body,.footer{
        margin: 20px 0;
    }
</style>
<body>
    <div id="root">
        <button @click="status=true">点击打开弹窗</button>
        <pop :visible="status" @nconfirm="confirmFn"></pop>        
    </div>
</body>
</html>
<template id="pop">
    <div class="marsk" v-if="visible" key="div">
       <div class="box">
        <div class="title">
            提示
        </div>
        <div class="body">
            提示内容
        </div>
        <div class="footer">
            <button @click="sconfirm">确定</button>
        </div>
       </div>
    </div>
</template>
<script src="http://unpkg.zhimg.com/vue@2"></script>
<script>
Vue.component("pop",{
    template:"#pop",
    props:{
        visible:{
            type:Boolean,
            default(){
                return false
            }
        }
    },
    methods:{
        sconfirm(){
            this.$emit("nconfirm")
        }
    }

})
const vm = new Vue({
 el: "#root",
 data: {
    status:false
},
 methods: {
    confirmFn(){
        this.status = false
    }
 }
})
</script>